var BalanceDetail = function () {
  var template = /* html */ `
    <div class="material-balance-detail" v-loading.fullscreen.lock="loading">
      <el-table fit stripe border :data="detailList" style="width:100%;" height="parent">
        <el-table-column prop="receivePaymentId" label="收付款单号" min-width="140px" header-align="center">
        </el-table-column>
        <el-table-column :resizable="false" label="类型" width="80px" align="center">
          <template slot-scope="scope">
            <span>{{i18n.getMsg('warehouseBalance.detail.type.'+scope.row.type)}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sumMoney" label="金额" min-width="100px" align="center">
        </el-table-column>
        <el-table-column prop="receiptPaymentMode" label="收付方式" min-width="120px" header-align="center">
        </el-table-column>
        <el-table-column prop="createUserName" label="制单人" min-width="80px" header-align="center">
        </el-table-column>
        <el-table-column :resizable="false" label="状态" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{i18n.getMsg('warehouseBalance.detail.status.'+scope.row.status)}}</span>
          </template>
        </el-table-column>
        <el-table-column :resizable="false" label="制单时间" width="110px" align="center">
          <template slot-scope="scope">
            <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}} </span>
          </template>
        </el-table-column>
        <el-table-column prop="approvalUserName" label="审核人" min-width="80px" header-align="center">
        </el-table-column>
        <el-table-column :resizable="false" label="审核时间" width="110px" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.approvalTime!=''&&scope.row.approvalTime!=null">
              {{moment(scope.row.approvalTime).format('YYYY-MM-DD')}}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  `;

  return {
    props: {
      warehouse: {
        type: Object,
        required: true
      }
    },

    data: function () {
      return {
        loading: false,
        detailList: []
      };
    },

    created: function () {
      this.setDetailList();
    },

    methods: {
      setDetailList: function () {
        var warehouse = this.warehouse;
        this.loading = true;
        var self = this;
        ajaxRequest('finance/getReceiptPaymentRecordByInOutId', {
          inOutId: warehouse.id
        }).then(function (detailList) {
          self.detailList = detailList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
